<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
  <head>
    <title>勇闯天涯报名表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,uer-scalable=no">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
  </head>
  
<style type="text/css">
<!--
.STYLE1 {
	font-family: "幼圆";
	font-weight: bold;
}
.STYLE2 {font-family: "幼圆"}
.STYLE6 {
	font-size: 20px;
	font-family: "幼圆";
}
-->
    </style>
  
  <body>
  
    <div class="container">
    
    <div align="center"><img src="http://static.hutiao.me/snow/huodong/ycty/011.jpg" class="img-responsive"></div>
    <div align="center"><img src="http://static.hutiao.me/snow/huodong/ycty/022.jpg" class="img-responsive"></div>
    
    <h3 class="text-center STYLE1">我要报名</h3>
    
    <s:form id="yongchuangform" action="yongchuangtianya" theme="simple" role="form">
    
	  <div class="form-group">
	    <label for="inputName">姓名</label>
	    <s:textfield key="yctyBean.name" data-toggle="tooltip" cssClass="form-control" id="inputName" placeholder="" />
	  </div>
	  <div class="form-group">
	    <label for="inputGender" class="">性别</label>
	    <s:select list="{'---请选择性别---','男','女'}" theme="simple" name="yctyBean.gender" id="inputGender" cssClass="form-control"></s:select>
	  </div>
	  <div class="form-group">
	    <label for="inputAge">年龄</label>
	    <s:textfield key="yctyBean.age" data-toggle="tooltip" cssClass="form-control" id="inputAge" placeholder="" />
	  </div>
      <div class="form-group">
	    <label for="inputPhone">电话</label>
	    <s:textfield key="yctyBean.phone" data-toggle="tooltip" cssClass="form-control" id="inputPhone" placeholder="" />
	  </div>
	  <div class="form-group">
	    <label for="inputArea" class="">报名区域</label>
	    <s:select list="{'---请选择报名区域---','武汉','孝南','天门','黄石','宜昌','襄阳','十堰'}" theme="simple" name="yctyBean.area" id="inputArea" cssClass="form-control"></s:select>
	  </div>
      <s:submit id="saveForm" value="提交" data-loading-text="正在保存..." cssClass="btn btn-warning btn-block" />
      
      <p></p>
      <p class="text-danger">温馨提示:</p>
      <p class="text-danger">1.请在报名区域内填写清楚想参加何地的活动</p>
      <p class="text-danger">2.参与此次活动来回旅费需自理</p>
	  <p class="text-danger">3.参与者报名时应确定自己身体健康，无突发性疾病，如若隐瞒参与，责任自负</p>
	  <p class="text-danger">4.活动最终解释权归华润雪花啤酒（武汉）有限公司</p>
      
    </s:form>
    
    </div>
    
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/jquery.form.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    	$("form").submit(function(e){
    		
    		var name = $('#inputName').val();
    		var gender = $('#inputGender').val();
    		var age = $('#inputAge').val();
    		var phone = $('#inputPhone').val();
    		var area = $('#inputArea').val();
    		
    		if (name==null || name=='') {
    			alert("请填写姓名");
    			return;
    		}
    		if (gender==null || gender=='' || gender=='---请选择性别---' ) {
    			alert("请选择性别");
    			return;
    		}
    		if (age==null || age=='') {
    			alert("请填写年龄");
    			return;
    		}
    		if (phone==null || phone=='') {
    			alert("请填写电话");
    			return;
    		}
    		if (area==null || area=='' || area=='---请选择报名区域---' ) {
    			alert("请选择报名区域");
    			return;
    		}

    		var params=$('#yongchuangform').formSerialize();
    		params = decodeURIComponent(params,true);
    		$.ajax({
    			type: "POST",
				url: "./yongchuangtianya_save",
				dataType: "json",
				data: params,
				async: false,
				success: function(data) {
					alert(data.result);
				},
				error: function(err) {
					alert("抱歉，我们遇到一点问题，请稍后再试。");
				}
			});
    		
    		
    	});
    });
    
    </script>
    
  </body>
</html>
